<template>
  <div :class="wrpCls">
    <div :class="prefixCls">
      <img class="header-icon" src="~@/assets/excel.png">
      <a :href="download.example">样表下载</a>
    </div>
    <div :class="prefixCls">
      <img class="header-icon" src="~@/assets/word.png">
      <a :href="download.handbook">操作手册</a>
    </div>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
    <!-- <select-lang :class="prefixCls" /> -->
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import { mapState } from 'vuex'
import { tableDownload } from '@/api/table'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true,
      download: {
        handbook: tableDownload + 'handbook',
        example: tableDownload + 'example'
      }
    }
  },
  computed: {
    ...mapState({
      username: (state) => state.user.username
    }),
    currentUser () {
      return {
        name: this.username || '游客'
      }
    },
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header-icon {
  width: 20px;
  margin: -3px 6px 0 0;
}
</style>
